<template>
  <div class="app-container">
    <div>
      <div>
        <router-link class="router" to="/match/addList">
          <el-button type="primary">新建赛事</el-button>
        </router-link>
        <router-link to="/match/addLeague">
          <el-button type="primary">新建联赛</el-button>
        </router-link>
      </div>
      <br>

      <!-- 搜索区域 -->
      <el-form ref="queryRef" :model="queryParams" :inline="true">
        <el-form-item label="赛事名称" prop="name">
          <el-input
            v-model="queryParams.name"
            placeholder="赛事名称"
            clearable
            style="width: 240px"
            @keyup.enter="searchFN"
          />
        </el-form-item>
        <el-form-item label="赛事类型" prop="type">
          <el-select v-model="queryParams.type">
            <el-option label="独立赛" value="0" />
            <el-option label="联赛" value="1" />
          </el-select>
        </el-form-item>
        <el-form-item label="发布状态" prop="type">
          <el-select v-model="queryParams.releaseStatus">
            <el-option label="已发布" value="1" />
            <el-option label="未发布" value="0" />
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" icon="Search" @click="searchFN">搜索</el-button>
          <el-button icon="Refresh" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
      <!-- 表格数据 -->
      <el-table :data="list" style="width: 100%" @sort-change="sortChange">
        <el-table-column label="序号" align="center" type="index" width="50" />
        <el-table-column
          label="赛事类型"
          align="center"
          prop="typeStr"
          min-width="80"
        />
        <el-table-column
          label="项目"
          align="center"
          prop="projectName"
          min-width="120"
        >
          <template #default="props">
            <div v-if="props.row.type == 1">/</div>
            <div v-else>{{ props.row.projectName }}</div>
          </template>
        </el-table-column>

        <el-table-column
          label="赛事logo"
          align="center"
          prop="memberName"
          min-width="80"
        >
          <template #default="props">
            <el-image
              style="width: 50px; height: 50px"
              :src="props.row.logo"
              fit="cover"
            />
          </template>
        </el-table-column>
        <el-table-column
          label="赛事名称"
          align="center"
          prop="cptName"
          min-width="160"
        />
        <el-table-column
          label="赛事时间"
          align="center"
          prop="matchTimeStr"
          min-width="260"
          :sortable="'custom'"
        />
        <!-- <el-table-column
          label="报名时间"
          align="center"
          prop="enrollTimeStr"
          min-width="300"
          :sortable="'custom'"
        /> -->
        <el-table-column
          label="赛事项目"
          align="center"
          prop=""
          min-width="80"
        >
          <template #default="props">
            <el-button
              v-if="props.row.type == 0"
              type="text"
              @click="gocompetitionPro(props.row)"
            >去完善
            </el-button>
            <el-button v-else type="text" @click="LeagueFN(props.row)">去完善</el-button>
          </template>
        </el-table-column>

        <el-table-column
          label="项目费用"
          align="center"
          prop="costCounts"
          min-width="80"
        >
          <template #default="props">
            <el-button
              v-if="props.row.type == 0"
              type="text"
              @click="costFN(props.row)"
            >去完善
            </el-button>
            <el-button v-else type="text" @click="LeagueFN(props.row)">去完善</el-button>
          </template>
        </el-table-column>
        <el-table-column
          label="日程"
          align="center"
          prop="balance"
          min-width="80"
        >
          <template #default="props">
            <el-button
              type="text"
              @click="goSchedule(props.row)"
            >去完善
            </el-button>

          </template>
        </el-table-column>
        <el-table-column
          label="设置"
          align="center"
          prop="balance"
          min-width="55"
        >
          <template #default="props">
            <el-button type="text" @click="settings(props.row)">设置</el-button>
          </template>
        </el-table-column>
        <el-table-column
          label="报名状态"
          align="center"
          prop="enrollStatusStr"
          min-width="110"
        />
        <el-table-column
          label="发布状态"
          align="center"
          prop="statusStr"
          min-width="80"
        />
        <el-table-column label="二维码" align="center">
          <template #default="scope">
            <el-image :src="qr" @click="getQrcode(scope.row)" />
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          align="center"
          fixed="right"
          class-name="small-padding"
          width="300"
        >
          <template #default="props">
            <el-button
              v-if="props.row.statusStr == '未发布'"
              type="text"
              @click="viewRow(props.row)"
            >编辑
            </el-button>
            <el-button type="text" @click="updateRow(props.row)">{{
              props.row.statusStr == "未发布" ? "发布" : "取消发布"
            }}
            </el-button>

            <el-button type="text" @click="editDisCount(props.row)">{{
              props.row.topFlag == 1 ? "取消置顶" : "置顶"
            }}
            </el-button>

            <!-- <el-button type="text" @click="settings(props.row)">设置</el-button> -->

            <el-button type="text" @click="consumeList(props.row)">数据</el-button>
            <el-button
              v-if="
                props.row.statusStr == '未发布' &&
                  getDate(props.row.beginTime) >= timer
              "
              type="text"
              @click="delList(props.row)"
            >删除
            </el-button>
            <el-button
              v-if="props.row.type == 1"
              type="text"
              @click="LeagueFN(props.row)"
            >分站赛管理
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="total > 0"
        v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize"
        :total="total"
        @pagination="initData"
      />
    </div>
    <el-dialog v-model="qrcodeOpen" title="查看小程序二维码" width="500px" append-to-body>
      <el-image :src="qrcode" style="margin: auto;display: block;">
        <template #error>
          <div class="image-slot">Loading<span class="dot">...</span></div>
        </template>
      </el-image>
    </el-dialog>
  </div>


</template>

<script setup>
import { useRouter, useRoute } from 'vue-router'
import { getCurrentInstance, ref } from 'vue'
import { reactive } from '@vue/runtime-core'
import {
  getList,
  overhead,
  cancel,
  publish,
  disqualification,
  delApi, getMiniappQrCode
} from '@/api/match/list.js'
import qr from '@/assets/icons/svg/qrcode.svg'

const { proxy } = getCurrentInstance()
const total = ref(0)
const list = ref([])
const router = useRouter()
const route = useRoute()
const timer = new Date().getTime()
const data = reactive({
  queryParams: {
    sourceFlag: 0,
    pageNum: 1,
    pageSize: 10,
    matchOrder: 0,
    signOrder: 0
  },
  form: {}
})

function getDate(val) {
  return new Date(val).getTime()
}

const { queryParams, form } = toRefs(data)

onMounted(() => {
  initData()
})

// 获取赛会列表
async function initData() {
  const res = await getList(queryParams.value)
  list.value = res.rows
  total.value = res.total
}

// 降序升序
function sortChange(column) {
  // 升序
  if (column.prop == 'enrollTimeStr') {
    // console.log(column.prop);
    // 报名
    if (column.order == 'ascending') {
      queryParams.value.signOrder = 1
    } else if (column.order == 'descending') {
      queryParams.value.signOrder = 0
    }
  }

  if (column.prop == 'matchTimeStr') {
    // console.log(column.prop);
    // 赛事
    if (column.order == 'ascending') {
      queryParams.value.matchOrder = 1
    } else if (column.order == 'descending') {
      queryParams.value.matchOrder = 0
    }
  }

  initData()
}

// 搜索
function searchFN() {
  initData()
}

// 重置
function resetQuery() {
  queryParams.value = {}
  queryParams.value.sourceFlag = 0
  queryParams.value.pageNum = 1
  queryParams.value.pageSize = 10
  queryParams.value.matchOrder = 0
  queryParams.value.signOrder = 0
  initData()
}

// 置顶/取消置顶
async function editDisCount(row) {
  if (row.topFlag == 0) {
    const res = await overhead(row.id)
    if (res.code == 200) {
      initData()
      proxy.$modal.msgSuccess('操作成功')
    } else {
      proxy.$modal.msgError('操作失败')
    }
  } else {
    const res = await cancel(row.id)
    if (res.code == 200) {
      initData()
      proxy.$modal.msgSuccess('操作成功')
    } else {
      proxy.$modal.msgError('操作失败')
    }
  }
}

// 发布
async function updateRow(row) {
  form.value.id = row.id
  if (row.statusStr == '未发布') {
    if (row.type != 1) {
      // 普通赛事，发布验证
      if (row.projectCounts == 0) {
        return proxy.$modal.msgError('该项赛事下没有报名项目！')
      }
      if (row.chargeFlag == 1 && row.costCounts == 0) {
        return proxy.$modal.msgError('该项赛事为收费项目，未设置费用！')
      }
    }

    const res = await publish(form.value)
    if (res.code == 200) {
      initData()
      proxy.$modal.msgSuccess('操作成功')
    } else {
      proxy.$modal.msgError('操作失败')
    }
  } else {
    // 取消发布
    form.value.id = row.id
    const res = await disqualification(form.value)
    if (res.code == 200) {
      initData()
      proxy.$modal.msgSuccess('操作成功')
    } else {
      proxy.$modal.msgError('操作失败')
    }
  }
}

// 日程
function goSchedule(row) {
  router.push({
    path: '/match/schedule',
    query: { id: row.id }
  })
}

// 赛事项目
function gocompetitionPro(row) {
  router.push({
    path: '/match/competitionPro',
    query: {
      id: row.id,
      baseProjectId: row.baseProjectId,
      signType: row.signType
    }
  })
}

// 费用
function costFN(row) {
  router.push({
    path: '/match/cost',
    query: { id: row.id }
  })
}

// 数据
function consumeList(row) {
  if (row.type == 1) {
    router.push({
      path: '/match/leagueData',
      query: { id: row.id, type: row.type }
    })
  } else {
    router.push({
      path: '/match/competitiondata',
      query: { id: row.id, type: row.type }
    })
  }
}

// 编辑
function viewRow(row) {
  if (row.typeStr == '联赛') {
    router.push({
      path: '/match/addLeague',
      query: { id: row.id }
    })
  } else {
    router.push({
      path: '/match/addList',
      query: { id: row.id }
    })
  }
}

// 删除
function delList(row) {
  proxy.$modal
    .confirm('是否确认删除赛事名称为"' + row.cptName + '"的数据项？')
    .then(async function() {
      form.value.ids = row.id
      await delApi(form.value)
    })
    .then(async() => {
      await initData()
      proxy.$modal.msgSuccess('操作成功')
    })
    .catch(() => {
    })
}

function settings(row) {
  router.push({
    path: '/match/setting',
    query: { id: row.id }
  })
}

// 联赛
function LeagueFN(row) {
  router.push({
    path: '/match/leagueParticulars',
    query: { id: row.id }
  })
}

const qrcodeOpen = ref(false)
const qrcode = ref('')

function getQrcode(row) {
  qrcodeOpen.value = true
  qrcode.value = ''
  getMiniappQrCode(row.id, row.type)
    .then(res => {
      qrcode.value = 'data:image/gif;base64,' + res.data
    })
}
</script>

<style lang="scss" scoped>
.router {
  margin-right: 20px;
}
</style>
